<template>
  <view>
    <view
        v-if="show"
        @click="close"
        class="back"></view>
    <u-popup
        :z-index="999999"
        mode="bottom"
        bgColor="rgba(0,0,0,0)"
        overlay-opacity="0"
        :show="show" @close="close" @open="open">
      <view>
        <view
            v-for="item in list"
            class="box">
          <view
              @click="change(item.code)"
              class="in-box">
            {{item.name}}
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    userInfo:{
      type: Object,
      default: () => {
        return {
          birthday: 0,
          genderCode:"male"
        };
      }
    }
  },
  data() {
    return {
      show: false,
      list: [
        {
          code:"male",
          name:"男"
        },
        {
          code:"female",
          name:"女"
        }
      ],

    };
  },
  mounted() {
  },
  methods:{
    open(){
      this.show = true;
      this.$emit("open");
    },
    close(){
      this.show = false;
      this.$emit("close");
    },
    change(code){
      this.$emit("change",code);
      this.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.back{
  position: fixed;
  z-index: 999999;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.box{
  position: relative;
  background-color: #FFFFFF;
  padding: 0 20rpx 20rpx 20rpx;
  text-align: center;

  .in-box{
    position: relative;
    padding: 20rpx 0;
  }

  .in-box:active{
    opacity: .5;
  }
}

.text{
  position: absolute;
  display: inline-block;
  right: 0;
  font-size: 22rpx;
}
</style>
